<template>
  <el-dialog
    title="绑定手机号"
    v-if="bp.show"
    :visible.sync="bp.show"
    width="500px"
    :close-on-click-modal="false"
  >
    <user-info v-if="userInfo" :userInfo="userInfo" />
    <el-form
      :model="bp.data"
      status-icon
      ref="changePhone"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item v-if="userInfo && userInfo.phone" label="已绑定手机号">
        {{ userInfo.phone }}
        <el-button
          type="danger"
          @click="unbind()"
          size="mini"
          style="float: right;"
        >
          解除绑定
        </el-button>
      </el-form-item>
      <el-form-item
        :label="(userInfo && userInfo.phone ? '更换' : '') + '手机号'"
        prop="phone"
        :verify="{ type: 'phone' }"
        style="margin-top: 20px;"
      >
        <el-input
          v-model="bp.data.phone"
          placeholder="请输入手机号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="短信验证码" prop="smsCode" :verify="{ length: 6 }">
        <el-input v-model="bp.data.smsCode" placeholder="请输入短信验证码">
          <SmsButton slot="append" @click="sendPhoneCode" ref="sendcode" />
        </el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="bp.show = false">
        取 消
      </el-button>
      <el-button type="primary" @click="doChangePhone" :loading="bp.loading">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import SmsButton from './sms-button'
import userInfo from './user-info.vue'
export default {
  name: 'bind-phone',
  components: {
    SmsButton,
    userInfo
  },
  data () {
    return {
      bp: {
        show: false,
        loading: false,
        data: {
          phone: '',
          smsCode: ''
        }
      },
      userInfo: null
    }
  },
  watch: {
    'bp.show' (n) {
      if (!n) {
        this.$parent.getList()
      } else {
        this.bp.data = {
          phone: '',
          smsCode: ''
        }
      }
    }
  },
  methods: {
    open (row) {
      this.bp.show = true
      this.userInfo = row
    },
    sendPhoneCode () {
      this.$refs.changePhone.validateField('phone', phoneError => {
        //验证手机号码是否正确
        if (phoneError) {
          this.$swal.error('请输入正确的手机号')
        } else {
          this.$refs.sendcode.loading = true
          this.$POST('sot-admin-api/sys/sms/sendPhoneCode', {
            phone: this.bp.data.phone,
            type: 'sys_bind_phone_login'
          })
            .then(res => {
              this.$refs.sendcode.loading = false
              if (res.errorCode == '00000') {
                this.$refs.sendcode.send() // 已发送
                this.bp.data.smsCode = ''
              } else {
                this.$swal.error(res.message)
              }
            })
            .catch(_ => {
              this.$refs.sendcode.loading = false
            })
        }
      })
    },
    doChangePhone () {
      this.bp.data.userId = this.userInfo.userId
      this.$refs.changePhone.validate(valid => {
        if (valid) {
          this.bp.loading = true
          this.$POST('sot-admin-api/sys/bind/phoneBind', this.bp.data)
            .then(res => {
              this.bp.loading = false
              if (res.errorCode == '00000') {
                this.$swal.success('绑定成功')
                this.bp.show = false
              } else {
                this.$swal.error(res.message)
              }
            })
            .catch(_ => {
              this.bp.loading = false
            })
        }
      })
    },
    // 查询是否已经绑定
    unbind () {
      this.$confirm(
        '确定将当前手机号解除绑定?解除后该手机号不可登录系统',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$POST('sot-admin-api/sys/bind/phoneUnbind', {
          userId: this.userInfo.userId
        }).then(res => {
          if (res.errorCode == '00000') {
            this.$swal.success('提交成功')
            this.bp.show = false
          } else {
            this.$swal.error(res.message)
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.qrcode {
  width: 250px;
  margin: 20px auto;
}
.bound {
  text-align: center;
}
</style>
